<template>
  <div class="flex items-start">
    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
      <i :class="`fa ${icon} text-blue-500`"></i>
    </div>
    <div>
      <p class="font-medium text-gray-800">{{ title }}</p>
      <p class="text-gray-600">{{ content }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    icon: String,
    title: String,
    content: String
  }
}
</script>